import React from 'react'
import { Form, Input, Select, Button, Row, Col, DatePicker } from 'antd'
const FormItem = Form.Item
const { Option } = Select
const dateFormat = 'YYYY/MM/DD';
const TopForm = ({ form: { getFieldDecorator, getFieldsValue, resetFields }, onSearch, onClick4, workShopList, onClick5, advanced }) => {
    const cz = () => {
        if (onClick4) {
            onClick4()
        }
    }
    const advancedss = () => {
        if (onClick5) {
            onClick5()
        }
    }
    const formItemLayout = {
        // 抽屉里面Form。二列的布局比例
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 16
        }
    };
    return (
        <div>
            <Form>
                <Row gutter={24}>
                    <Col span={5}>
                        <FormItem label='批 号'{...formItemLayout}>
                            {
                                getFieldDecorator('batchNo', {
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(
                                    <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='备料单位'{...formItemLayout}>
                            {
                                getFieldDecorator('storeCode', {
                                    // initialValue: '零件仓'
                                })(
                                    <Select allowClear={true} showSearch placeholder='请选择备料单位'>
                                        <Option value='零件仓'>零件仓</Option>
                                        <Option value='配件仓'>配件仓</Option>
                                        <Option value='钣金仓'>钣金仓</Option>
                                    </Select>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='交机日期'{...formItemLayout}>
                            {
                                getFieldDecorator('deliveryDate', {
                                    // initialValue: moment('2015/01/01', dateFormat)
                                })(
                                    <DatePicker allowClear format={dateFormat} />
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='装配部门'{...formItemLayout}>
                            {
                                getFieldDecorator('departmentCode', {
                                    // initialValue: '大机总装'
                                })(
                                    <Select allowClear={true} placeholder='请选择装配部门'>
                                        {
                                            workShopList && workShopList.map(item => <Option key={item.code} value={item.code}>{item.name}</Option>)
                                        }
                                    </Select>
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
                        <FormItem>
                            <Button type="primary" icon="search" onClick={() => onSearch(getFieldsValue())}>
                                {'查询'}
                            </Button>
                        </FormItem>
                        <FormItem>
                            <Button type='primary' icon={advanced ? 'up' : 'down'} onClick={() => advancedss()}>
                                {' 展开'}
                            </Button>
                        </FormItem>
                        <FormItem>
                            <Button type="default" onClick={() => {
                                cz()
                                resetFields()
                            }}
                                icon={'redo'}
                            >
                                {'重置'}
                            </Button>
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={24}>
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='物料编码'{...formItemLayout}>
                                {
                                    getFieldDecorator('partCode', {
                                        getValueFromEvent: (event) => {
                                            return event.target.value.replace(/\s+/g, "")
                                        },
                                    })(
                                        <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='图 号'{...formItemLayout}>
                                {
                                    getFieldDecorator('pagerCode', {
                                        getValueFromEvent: (event) => {
                                            return event.target.value.replace(/\s+/g, "")
                                        },
                                    })(
                                        <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='物料名称'{...formItemLayout}>
                                {
                                    getFieldDecorator('partName', {
                                        getValueFromEvent: (event) => {
                                            return event.target.value.replace(/\s+/g, "")
                                        },
                                    })(
                                        <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                    {
                        advanced ? <Col span={5}>
                            <FormItem label='欠料回复'{...formItemLayout}>
                                {
                                    getFieldDecorator('shortAnswer', {
                                    })(
                                        <Select allowClear={true} placeholder='请选择欠料回复'>
                                            <Option value={1}>是</Option>
                                            <Option value={0}>否</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                </Row>
                <Row gutter={24}>

                    {
                        advanced ? <Col span={5}>
                            <FormItem label='成品状态'{...formItemLayout}>
                                {
                                    getFieldDecorator('productStatus', {
                                        // initialValue: ''
                                    })(
                                        <Select allowClear={true} placeholder='请选择成品状态'>
                                            <Option value={0}>未入库</Option>
                                            <Option value={1}>已入库</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col> : ''
                    }
                </Row>
            </Form>
        </div>
    )
}
export default Form.create()(TopForm);
